import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

/**
 * 为颜色添加透明度
 * @param {string} color - 颜色值，如 '#1cc88a' 或 'rgb(28, 200, 138)'
 * @param {number} alpha - 透明度值，0-1之间
 * @returns {string} 带有透明度的颜色值
 */
const addAlpha = (color, alpha) => {
  // 如果是十六进制颜色
  if (color.startsWith('#')) {
    const hex = color.slice(1);
    const r = parseInt(hex.slice(0, 2), 16);
    const g = parseInt(hex.slice(2, 4), 16);
    const b = parseInt(hex.slice(4, 6), 16);
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  }
  // 如果是rgb颜色
  else if (color.startsWith('rgb')) {
    return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`);
  }
  // 其他情况，返回原颜色
  return color;
};

/**
 * 使用ECharts实现的堆叠折线图组件
 * @param {Array} data - 数据数组，包含多个系列的数据，例如 [[上涨家数数据], [下跌家数数据]]
 * @param {Array} labels - X轴标签数组，例如日期
 * @param {Array} colors - 每个系列的颜色数组
 * @param {Array} legend - 图例名称数组
 * @param {number} height - 图表高度
 * @param {Object} options - 额外的ECharts配置选项
 */
const EChartStackedLine = ({ data, labels, colors = ['#1cc88a', '#e74a3b'], legend = ['上涨家数', '下跌家数'], height = 300, options = {} }) => {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    // 初始化图表
    if (chartRef.current) {
      // 如果已经有图表实例，先销毁
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }

      // 创建新的图表实例
      chartInstance.current = echarts.init(chartRef.current);
      
      // 准备系列数据
      const series = data.map((seriesData, index) => {
        return {
          name: legend[index] || `系列${index + 1}`,
          type: 'line',
          // 移除stack属性，使折线图不再堆叠
          smooth: false, // 使用直线连接点，不平滑
          symbol: 'circle', // 数据点形状
          symbolSize: 5, // 数据点大小
          label: {
            show: false
          },
          data: seriesData,
          lineStyle: {
            width: 2,
            color: colors[index] || undefined
          },
          itemStyle: {
            color: colors[index] || undefined
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colors[index] ? addAlpha(colors[index], 0.3) : undefined
              },
              {
                offset: 1,
                color: colors[index] ? addAlpha(colors[index], 0.05) : undefined
              }
            ])
          }
        };
      });

      // 设置图表选项
      const option = {
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: labels.length > 20 ? 100 - (20 / labels.length * 100) : 0, // 默认显示最近20条数据
            end: 100,
            zoomOnMouseWheel: true,
            moveOnMouseMove: true
          }
        ],
        legend: {
          data: legend,
          textStyle: {
            color: '#666'
          },
          right: '4%',
          top: '0%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0%',
          top: '12%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: labels,
          axisLabel: {
            interval: 'auto',
            rotate: 30,
            fontSize: 10,
            color: '#666',
            formatter: function(value) {
              // 如果是日期格式（如2023-05-01），则只显示月-日
              if (value && value.includes('-')) {
                const parts = value.split('-');
                if (parts.length === 3) {
                  return `${parts[1]}-${parts[2]}`;
                }
              }
              return value;
            }
          },
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: false // 隐藏y轴刻度标签
          },
          splitLine: {
            show: false // 隐藏网格线
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          ...series,
          {
            type: 'line',
            markLine: {
              silent: true,
              symbol: 'none', // 完全去除箭头符号
              data: [{
                yAxis: 3000,
                lineStyle: {
                  color: '#FFD700',
                  width: 1,
                  type: 'dashed'
                },
                label: {
                  show: false
                }
              }]
            }
          }
        ],
        ...options // 合并额外的配置选项
      };

      // 设置图表
      chartInstance.current.setOption(option);
      
      // 响应窗口大小变化
      const handleResize = () => {
        chartInstance.current && chartInstance.current.resize();
      };
      
      window.addEventListener('resize', handleResize);
      
      // 清理函数
      return () => {
        window.removeEventListener('resize', handleResize);
        chartInstance.current && chartInstance.current.dispose();
      };
    }
  }, [data, labels, colors, legend, options]);

  return (
    <div style={{ width: '100%', height: height || 300, minHeight: '100px', position: 'relative' }}>
      <h3 style={{ margin: 0, fontSize: '16px', fontWeight: 'bold', position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
        市场涨跌家数{labels.length > 0 ? ` ( ${labels[labels.length - 1]})` : ''}
      </h3>
      <div 
        ref={chartRef} 
        style={{ 
          width: '100%', 
          height: '100%'
        }}
      />
    </div>
  );
};

export default EChartStackedLine;